<div>
  <!--  输入框绑定angular的(change)方法，调用组件函数，更新私有变量demo的name属性-->
  <span>输入名字: </span> <input (change)="updateName($event.target.value)">
</div>

<div>
  <!--  输入框绑定angular的(change)方法，调用组件函数，更新私有变量demo的height属性-->
  <span>输入身高: </span> <input (change)="updateHeight($event.target.value)">
</div>

<div>
  <!--  输入框绑定angular的(change)方法，调用组件函数，更新私有变量demo的height属性-->
  <span>输入一段信息: </span> <input (change)="updateMsg($event.target.value)">
</div>

<button (click)="submitInfo()"> 提交</button>
<button (click)="checkData()"> 检查</button>
<button (click)="clearData()"> 清空</button>

<hr>

<!--提交之后显示后端返回的信息-->
<div>
  后端返回的信息是：
  <div> {{message}} </div>
</div>

<hr>

<!--列出所有数据库中的数据，这里的demodatas为集合-->
<ul>
  <li *ngFor="let data of demodatas">
    <span>  {{data.id}}  </span>
    <span>  {{data.name}}  </span>
    <span>  {{data.height}}  </span>
    <span>  {{data.message.msg}}  </span>
  </li>
  <li *ngFor="let data of demodata.stringList">
    <span>  {{data}}  </span>
  </li>
</ul>
